<template>
  <div class="catalogue">
    <div class="nav">
      <van-nav-bar left-text="返回" title="目录" left-arrow @click-left="back">
      </van-nav-bar>
    </div>
    <div class="top">
      <div class="img">
        <img :src="img" alt="" @error="handleError($event)" />
      </div>
      <div class="book">
        <div class="title">{{ title }}</div>
        <div class="author">{{ author }}</div>
      </div>
    </div>
    <div class="totalArticleCount">共{{ totalArticleCount }}章</div>
    <!-- 目录 -->
    <div class="catalogue-list">
      <div
        class="catalogue-list-item"
        v-for="(item, i) in cataloglist"
        :key="i"
        @click="getid(item.secId)"
      >
        {{ item.title }}
        <hr />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "catalogue",
  data() {
    return {
      img: "",
      author: "",
      totalArticleCount: "",
      title: "",
      bookId: "",
      cataloglist: [],
    };
  },
  created() {
    this.bookId = this.$route.params.pid;
    console.log("this.bookId==>", this.bookId);
    this.getNoveldetail(this.bookId);
    this.getCatalogue(this.bookId);
  },
  methods: {
    //返回上一级
    back() {
      this.$router.go(-1);
    },

    //得到章节的id
    getid(secId) {
      let bookId = this.bookId;
      this.$router.push({ name: "bookcontent", params: { secId, bookId } });
    },

    //根据id获取书籍详情
    //https://apis.netstart.cn/yunyuedu/book/getsub.json
    getNoveldetail(id) {
      //发起申请
      this.axios({
        //请求类型
        method: "get",
        //请求路径
        url: "https://apis.netstart.cn/yunyuedu/book/getsub.json",
        params: {
          id,
        },
      })
        .then((result) => {
          this.img = result.data.feed.entry.link[2].href;
          //作者
          this.author = result.data.feed.entry.author.name;
          //总章节
          this.totalArticleCount =
            result.data.feed.entry["pris:book"].totalArticleCount[0];
          this.title = result.data.feed.entry.title;
        })
        .catch((err) => {
          console.log("err ==> ", err);
        });
    },
    //根据id获取书籍目录
    getCatalogue(source_uuid) {
      //发起申请
      this.axios({
        //请求类型
        method: "get",
        //请求路径
        url: "https://apis.netstart.cn/yunyuedu/reader/book/info.json",
        params: {
          source_uuid,
        },
      })
        .then((result) => {
          this.cataloglist = result.data.data.catalog;
        })
        .catch((err) => {
          console.log("err ==> ", err);
        });
    },

    //没有图片的话用默认图片
    handleError(e) {
      e.currentTarget.src =
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fc823bc165add16c76bdefaee090c45c202267a452deaa-lLhkHf_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650685371&t=e67779564f0416a69ca07519acf1045b";
    },
  },
};
</script>

<style lang="less" scoped>
.catalogue {
  width: 100%;
  height: 100px;
  .top {
    display: flex;
    padding: 20px;
    .img {
      margin-right: 20px;
      img {
        width: 80px;
        height: 100px;
        border-radius: 10%;
      }
    }
    .book {
      padding-top: 20px;
      padding-bottom: 20px;
      .title {
        font-size: 25px;
        margin-bottom: 10px;
      }
      .author {
        font-size: 16px;
      }
    }
  }
  .totalArticleCount {
    padding-left: 20px;
    font-size: 15px;
  }
  .catalogue-list {
    padding: 20px;
    .catalogue-list-item {
      margin-bottom: 10px;
    }
  }
}
</style>